Vue3 基础 – 快速上手 & 常用指令 & :key 的原理

1. 在 HTML 网页中使用 vue3 的3个基本步骤

通过 script 标签的 src 属性，在当前网页中全局引入 vue3 的脚本文件：


xxxxxxxxxx
1
1
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

创建 vue3 的单页面应用程序实例：


xxxxxxxxxx
9
1
// 2.1 从 Vue 对象中解构出 createApp 函数
2
const { createApp } = Vue
3
4
// 2.2 调用 createApp 这个函数，就能够创建出一个单页面应用程序的实例
5
const app = createApp()
6
7
// 2.3 调用 app 实例对象上的 mount() 函数，
8
// 指定单页面应用程序 app，实际要控制页面上哪个区域的渲染
9
app.mount('#app')

声明 vue3 的单页面应用程序实例，实际要控制的页面区域：


xxxxxxxxxx
3
1
<!-- 注意：如果内容为空，则 vue3 会在提示一个警告消息：
2
[Vue warn]: Component is missing template or render function. at <App> -->
3
<div id="app"></div>

2. 定义和渲染数据

在调用 createApp() 函数时，可以提供一个对象作为配置参数，例如：


xxxxxxxxxx
1
1
const app = createApp({ /*配置对象*/ })

如果想提供要渲染的数据，可以在步骤1的配置对象中，通过 data 节点提供渲染期间要使用的数据：


xxxxxxxxxx
8
1
const app = createApp({
2
 // 2.1 注意：data 节点是一个函数
3
 data() {
4
   // 2.2 在 data 函数内部，return 的这个对象，就是数据对象，
5
   // 要渲染的数据，可以直接写到这个对象中，例如 return { name: 'zs' }
6
   return {}
7
 }
8
})

在步骤2的 data 节点中，定义一个名为 name 的数据，值是 liulongbin：


xxxxxxxxxx
7
1
const app = createApp({
2
 data() {
3
   return {
4
     name: 'liulongbin'
5
   }
6
 }
7
})

在 vue3 控制的模板结构中，使用 {{ 数据名 }} 语法，把数据渲染出来：


xxxxxxxxxx
3
1
<div id="app">
2
    <h1>大家好，我是：{{ name }}</h1>
3
</div>

拓展：当我们修改 data 节点下的数据后，即可看到页面上的 HTML 内容会自动被刷新。这就是 vue 的强大之处：数据驱动视图。修改 data 数据的示例代码如下：
```
xxxxxxxxxx
1
1
app._instance.proxy.name = 'escook'
```

3. vue3 中常用的渲染指令

在 vue 中，指令是带有 v- 前缀的特殊 attribute，它是 vue 提供的特殊语法，大家有必要掌握 vue 中常用指令的使用。

指令能够辅助前端程序员高效地把数据渲染为 HTML 的结构，而程序员不需要调用任何操作 DOM 的 API。

3.0 常用指令的分类

内容渲染指令
属性绑定指令
双向绑定指令
条件渲染指令
事件绑定指令
列表渲染指令

3.1 内容渲染指令

1. 插值表达式

插值表达式（又叫做：Mustache）的语法为 {{ }}，vue 在解析模板期间，会把 {{ }} 所在的位置，替换为对应的数据值，例如：


xxxxxxxxxx
1
1
<h1>大家好，我是：{{ name }}</h1>

vue 会把 name 的值，替换到 {{ name }} 所在的位置。

注意：插值表达式 {{ }} 是唯一一个不以 v- 前缀开头的指令。

2. v-text

v-text 指令用来填充 HTML 元素的内容，如果 HTML 元素内部有其它内容存在，则会被覆盖掉。语法格式如下：


xxxxxxxxxx
1
1
<h3 v-text="msg">是兄弟就来</h3>

对应的数据为：


xxxxxxxxxx
7
1
const app = createApp({
2
  data() {
3
    return {
4
      msg: '砍我吧'
5
    }
6
  }
7
})

注意：由于 v-text 指令存在覆盖已有内容的问题，所以在实际开发中它很少被用到。最常用的还是 {{ }} 插值表达式，因为它只是占位符，不会覆盖已有内容。

3. v-html

v-html 指令用来渲染带有 HTML 标记的文本内容，它可以把 HTML 标记解析为真正的 HTML 元素，并插入到模板中渲染。

而插值表达式和 v-text 指令只会把 HTML 标记渲染为纯文本，而不是 HTML。

v-html 的语法格式如下：


xxxxxxxxxx
1
1
<div v-html="rawHtml"></div>

对应的数据为：


xxxxxxxxxx
7
1
const app = createApp({
2
  data() {
3
    return {
4
      rawHtml: '<span style="color: red;">少年强则国强</span>'
5
    }
6
  }
7
})

3.2 属性绑定指令

1. v-bind

v-bind 指令用来为元素的属性绑定动态的属性值。指令语法如下：


xxxxxxxxxx
1
1
<div v-bind:title="titleMsg">xxx</div>

对应的数据为：


xxxxxxxxxx
7
1
const app = createApp({
2
  data() {
3
    return {
4
      titleMsg: '哇哈哈'
5
    }
6
  }
7
})

又例如，为图片的 src 属性动态绑定属性的值：


xxxxxxxxxx
1
1
<img v-bind:src="url" />

对应的数据为：


xxxxxxxxxx
7
1
const app = createApp({
2
  data() {
3
    return {
4
      url: 'https://img.yzcdn.cn/vant/cat.jpeg'
5
    }
6
  }
7
})

2. v-bind 的简写

在实际开发中，v-bind 指令的使用频率非常高，为了简化它的写法，vue 规定 v-bind 指令可以简写为英文的 : 且二者是完全等价的。如上面的例子可以使用 : 简写为：


xxxxxxxxxx
2
1
<div :title="titleMsg">xxx</div>
2
<img :src="url" />

对应的数据为：


xxxxxxxxxx
8
1
const app = createApp({
2
  data() {
3
    return {
4
      titleMsg: '哇哈哈',
5
      url: 'https://img.yzcdn.cn/vant/cat.jpeg'
6
    }
7
  }
8
})

注意：今后在 vue 项目开发中，只要看到某个属性前面出现了英文的 : 那么，一定是为这个属性绑定了动态的值。

3. 绑定布尔值

在 vue 中，某些属性的取值可以是布尔值 true 或 false，表示当前的属性是否应该应用于当前的元素。例如 disabled 属性：


xxxxxxxxxx
5
1
<!-- 禁用按钮A -->
2
<button :disabled="true">按钮A</button>
3
4
<!-- 不禁用按钮B -->
5
<button :disabled="false">按钮B</button>

与之类似的，还有 radio 和 checkbox 的 checked 属性：


xxxxxxxxxx
8
1
<!-- 默认选中“男” -->
2
<input type="radio" name="gender" :checked="true">男
3
<input type="radio" name="gender">女
4
5
<!-- 默认选中“足球”和“乒乓球” -->
6
<input type="checkbox" name="hobby">篮球
7
<input type="checkbox" name="hobby" :checked="true">足球
8
<input type="checkbox" name="hobby" :checked="true">乒乓球

另外，表单元素 select 下的 option 选项的 selected 属性，也可以绑定布尔值：


xxxxxxxxxx
5
1
<select>
2
  <option value="北京">北京</option>
3
  <option value="上海" :selected="true">上海</option>
4
  <option value="广州">广州</option>
5
</select>

4. 动态绑定多个值

如果要为某个元素同时绑定多个动态的属性值，可以把多个动态属性封装为一个 JavaScript 对象：


xxxxxxxxxx
12
1
const app = createApp({
2
  data() {
3
    return {
4
      // propObj 对象中封装了一系列属性的键值对
5
      attrsObj: {
6
        id: 'box',
7
        class: 'container',
8
        title: '布局容器'
9
      }
10
    }
11
  }
12
})

通过不带参数的 v-bind 指令，即可方便的把 attrsObj 对象中封装的属性，一次性绑定到对应的元素上：


xxxxxxxxxx
1
1
<div v-bind="attrsObj">顶部 header 区域</div>

注意：不带参数的 v-bind 指令，指的是省略了 :属性名 的用法。

5. 拓展：使用 JavaScript 表达式

在 vue 的数据绑定中，除了支持简单的属性名绑定之外，还支持完整的 JavaScript 表达式绑定。

例如，以下这些都属于简单的属性名绑定，它们是直接把 data 中数据项的名字，绑定到了模板中：


xxxxxxxxxx
5
1
<div>我是：{{ name }}</div>
2
3
<div v-text="msg"></div>
4
5
<img :src="url" />

除此之外，还支持表达式的绑定，例如：


xxxxxxxxxx
11
1
<!-- 函数的调用 & 数学运算 -->
2
<div>我是：{{ name.toUpperCase() }}，我今年{{ age + 1 }}岁了。</div>
3
4
<!-- 函数的调用 -->
5
<div v-text="msg.split('').reverse().join('')"></div>
6
7
<!-- 字符串的拼接 -->
8
<img :src="'https://img.yzcdn.cn/vant/' + url" />
9
10
<!-- 三元表达式 -->
11
<div>{{ age >= 18 ? '抽烟喝酒烫头' : '可乐牛奶娃哈哈' }}</div>

对应的数据如下：


xxxxxxxxxx
10
1
const app = createApp({
2
 data() {
3
   return {
4
     name: 'liulongbin',
5
     age: 17,
6
     msg: '冯绍峰',
7
     url: 'cat.jpeg'
8
   }
9
 }
10
})

3.3 双向绑定指令

v-model 双向绑定指令，简化了表单元素的赋值和取值操作。

v-model 的作用：

data 数据源发生变化，自动重新渲染页面
表单数据发生变化，自动更新到 data 数据源中

1. 文本框的双向绑定

input 元素通过 v-model 指令，可以方便地进行赋值和取值，示例代码如下：


xxxxxxxxxx
2
1
<p>Message 的值是：{{ message }}</p>
2
<input type="text" v-model="message">

对应的数据如下：


xxxxxxxxxx
7
1
const app = createApp({
2
  data() {
3
    return {
4
      message: 'hello'
5
    }
6
  }
7
})

2. 多行文本框的双向绑定

textarea 元素通过 v-model 指令，可以方便地进行赋值和取值，示例代码如下：


xxxxxxxxxx
3
1
<p>Message 的值是：</p>
2
<pre>{{ message }}</pre>
3
<textarea v-model="message"></textarea>

对应的数据如下：


xxxxxxxxxx
8
1
const app = createApp({
2
  data() {
3
    return {
4
      // 注意：这里的 \n 是换行符
5
      message: 'hello \nworld.'
6
    }
7
  }
8
})

3. 复选框的双向绑定

单一复选框的双向绑定，绑定的是布尔类型的值：


xxxxxxxxxx
2
1
<p>复选框选中的flag值为：{{flag}}</p>
2
<input type="checkbox" v-model="flag">

对应的数据如下：


xxxxxxxxxx
8
1
const app = createApp({
2
 data() {
3
   return {
4
     // 是否被选中
5
     flag: false
6
   }
7
 }
8
})

多个复选框的双向绑定，绑定的是数组类型的值，而且每个 checkbox 必须通过 value 属性提供选中项的值：


xxxxxxxxxx
4
1
<p>多个复选框选中的 hobbies 值为：{{ hobbies }}</p>
2
<label><input type="checkbox" v-model="hobbies" value="篮球">篮球</label>
3
<label><input type="checkbox" v-model="hobbies" value="足球">足球</label>
4
<label><input type="checkbox" v-model="hobbies" value="冰球">冰球</label>

对应的数据如下：


xxxxxxxxxx
8
1
const app = createApp({
2
 data() {
3
   return {
4
     // 选中的值
5
     hobbies: []
6
   }
7
 }
8
})

4. 单选按钮的双向绑定

单选按钮的特点是多选一，所以对单选按钮进行双向绑定时，需要把多个单选按钮通过 v-model 指令绑定到同一个数据源，并通过 value 属性指定选中后的值：


xxxxxxxxxx
3
1
<p>单选按钮选中的 gender 值为：{{ gender }}</p>
2
<label><input type="radio" v-model="gender" value="男">男</label>
3
<label><input type="radio" v-model="gender" value="女">女</label>

对应的数据如下：


xxxxxxxxxx
8
1
const app = createApp({
2
  data() {
3
    return {
4
      // 选中的值
5
      gender: '男'
6
    }
7
  }
8
})

5. 选择器的双向绑定

单选选择器的双向绑定，只允许选中一个值：


xxxxxxxxxx
7
1
<p>选中的城市为：{{ city }}</p>
2
<select v-model="city">
3
 <option value="">请选择</option>
4
 <option value="beijing">北京</option>
5
 <option value="shanghai">上海</option>
6
 <option value="nanjing">南京</option>
7
</select>

对应的数据如下：


xxxxxxxxxx
7
1
const app = createApp({
2
 data() {
3
   return {
4
     city: ''
5
   }
6
 }
7
})

多选选择器的双向绑定，允许选中多个值，所以需要绑定数组格式的数据源：


xxxxxxxxxx
6
1
<p>选中的城市为：{{ areas }}</p>
2
<select v-model="areas" multiple>
3
 <option value="shunyi">顺义区</option>
4
 <option value="haidian">海淀区</option>
5
 <option value="daxing">大兴区</option>
6
</select>

对应的数据如下：


xxxxxxxxxx
7
1
const app = createApp({
2
 data() {
3
   return {
4
     areas: []
5
   }
6
 }
7
})

6. v-model 的 .lazy 修饰符

默认情况下，v-model 会在每次 input 事件后更新数据。可以添加 .lazy 修饰符来改为在每次 change 事件后更新数据：


xxxxxxxxxx
1
1
<input v-model.lazy="msg" />

7. v-model 的 .number 修饰符

如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：


xxxxxxxxxx
1
1
<input v-model.number="age" />

注意：

如果该值无法被 parseFloat() 处理，那么将返回原始值。
number 修饰符会在输入框有 type="number" 时自动启用。

8. v-model 的 .trim 修饰符

如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符：


xxxxxxxxxx
1
1
<input v-model.trim="msg" />

3.4 条件渲染指令

条件渲染指令用来条件性地渲染页面上的某一部分内容。只有表达式的条件成立，才会真正渲染这一部分的内容。

常用的条件渲染指令是 v-if、v-else 和 v-else-if。其中，v-if 指令可以单独使用，也可以结合 v-else 和 v-else-if 指令实现两个或多个条件的按需渲染。

1. v-if 的使用

v-if 的语法格式如下：


xxxxxxxxxx
1
1
<div v-if="表达式"></div>

其中，只有表达式的返回值为 true 时，才会真正渲染被 v-if 指令控制的 div 元素。

如果 v-if 的表达式返回值为 false，则被 v-if 指令控制的 div 不会被渲染到浏览器中。

例如：


xxxxxxxxxx
1
1
<div v-if="flag">无敌是多么的寂寞</div>

对应的数据为：


xxxxxxxxxx
7
1
const app = createApp({
2
  data() {
3
    return {
4
      flag: true
5
    }
6
  }
7
})

2. v-if 结合 v-else 的使用

v-if 指令可以结合 v-else 指令一起使用。

当条件为真时渲染被 v-if 指令控制的元素，当条件为假时渲染被 v-else 指令控制的元素。例如：


xxxxxxxxxx
2
1
<div v-if="age >= 18">抽烟喝酒烫头</div>
2
<div v-else>牛奶可乐娃哈哈</div>

注意：v-else 指令不需要通过 = 指定相应的表达式，因为 v-else 是兜底的条件，只要前面的所有条件都不满足，那么必然会触发 v-else 的执行。

3. v-if 结合 v-else-if 和 v-else 的使用

v-if 指令可以结合 v-else-if 和 v-else 指令一起使用，从而组成复杂的条件渲染逻辑。

当 v-if 或某个 v-else-if 相应的条件为真时，被控制的元素才会被渲染。

最后的 v-else 依然是兜底的条件，当所有的 v-if 和 v-else-if 条件都不成立时，才会触发 v-else 的执行。例如：


xxxxxxxxxx
4
1
<div v-if="score === 'A'">优秀</div>
2
<div v-else-if="score === 'B'">良好</div>
3
<div v-else-if="score === 'C'">一般</div>
4
<div v-else>差</div>

对应的数据为：


xxxxxxxxxx
7
1
const app = createApp({
2
  data() {
3
    return {
4
      score: 'A'
5
    }
6
  }
7
})

Vue3 基础 – 快速上手 & 常用指令 & :key 的原理

1. 在 HTML 网页中使用 vue3 的3个基本步骤

2. 定义和渲染数据

3. vue3 中常用的渲染指令

3.0 常用指令的分类

3.1 内容渲染指令

1. 插值表达式

2. v-text

3. v-html

3.2 属性绑定指令

1. v-bind

2. v-bind 的简写

3. 绑定布尔值

4. 动态绑定多个值

5. 拓展：使用 JavaScript 表达式

3.3 双向绑定指令

1. 文本框的双向绑定

2. 多行文本框的双向绑定

3. 复选框的双向绑定

4. 单选按钮的双向绑定

5. 选择器的双向绑定

6. v-model 的 .lazy 修饰符

7. v-model 的 .number 修饰符

8. v-model 的 .trim 修饰符

3.4 条件渲染指令

1. v-if 的使用

2. v-if 结合 v-else 的使用

3. v-if 结合 v-else-if 和 v-else 的使用

5. v-show 指令的使用

6. v-if 和 v-show 的对比

3.5 事件绑定指令

1. 事件绑定的基本语法

2. 方法事件处理器

3. 基于方法事件处理器实现数值自增

4. 内联事件处理器

5. 在内联处理器中调用方法

6. 在内联事件处理器中访问事件对象

7. 事件修饰符

8. 按键修饰符

9. 按键别名与按键名的获取

10. 系统按键修饰符

11. .exact 修饰符

12. 鼠标按键修饰符

3.6 列表渲染指令

1. v-for 的基本使用

2. v-for 中的索引

3. v-for 中的解构

4. template 上的 v-for

5. v-for 与 v-if 的优先级

3.7 v-for 中的 key 的基本使用

1. 案例：在 v-for 列表的头部追加元素

2. 新功能：勾选任务的完成状态

3. BugFix：解决勾选状态紊乱的方案

4. 新功能：为任务添加备注

5. BugFix：解决文本框内容紊乱的方案

6. 基于 key 值解决临时状态紊乱的问题

7. key 值的使用注意事项

3.8 v-for 中 key 值的原理

1. 虚拟 DOM 的概念

2. 虚拟 DOM 的优势

3. 就地更新策略

4. 就地更新策略和临时状态

5. 就地更新策略和数据绑定

6. key 值更新策略

7. 拓展：key 值更新策略（在中间新增）

8. 拓展：key 值更新策略（删除元素）

9. 拓展：key 值更新策略（移动元素）

11. `.exact` 修饰符